<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
		</demo-desc>
		
		<fu-section title="基础" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-form ref="baseForm" :modelValue="baseFormData" labelWidth="80px">
					<fu-form-item label="姓名" required>
						<fu-input v-model="baseFormData.name" placeholder="请输入姓名"></fu-input>
					</fu-form-item>
					<fu-form-item label="年龄" required>
						<fu-input v-model="baseFormData.age" placeholder="请输入年龄"></fu-input>
					</fu-form-item>
					<fu-form-item label="日期时间">
						<fu-date-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
					</fu-form-item>
				</fu-form>
			</view>
		</fu-section>
		
		<fu-section title="对齐方式" customClass="fu-m-t-20" type="line">
			<demo-desc>使用 labelPosition 设置对齐方式</demo-desc>
			<view class="fu-m-t-20">
				<fu-form ref="baseForm" :modelValue="baseFormData" labelWidth="80px" labelPosition="top">
					<fu-form-item label="姓名" required>
						<fu-input v-model="baseFormData.name" placeholder="请输入姓名"></fu-input>
					</fu-form-item>
					<fu-form-item label="年龄" required>
						<fu-input v-model="baseFormData.age" placeholder="请输入年龄"></fu-input>
					</fu-form-item>
				</fu-form>
			</view>
		</fu-section>
		
		<fu-section title="表单校验" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-form ref="valiForm" :modelValue="valiFormData" :rules="rules" labelWidth="80px">
					<fu-form-item label="姓名" required name="name">
						<fu-input v-model="valiFormData.name" placeholder="请输入姓名"></fu-input>
					</fu-form-item>
					<fu-form-item label="年龄" required name="age">
						<fu-input v-model="valiFormData.age" placeholder="请输入年龄"></fu-input>
					</fu-form-item>
					<fu-form-item label="自我介绍" name="introduce">
						<fu-textarea v-model="valiFormData.introduce" placeholder="请输入自我介绍"></fu-textarea>
					</fu-form-item>
				</fu-form>
				
				<fu-button height="44" color="#2979ff" @click="submit('valiForm')">提交</fu-button>
			</view>
		</fu-section>
		
		<fu-section title="自定义校验规则" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-form ref="customForm" :modelValue="customFormData" :rules="customRules" labelWidth="80px">
					<fu-form-item label="姓名" required name="name">
						<fu-input v-model="customFormData.name" placeholder="请输入姓名"></fu-input>
					</fu-form-item>
					<fu-form-item label="年龄" required name="age">
						<fu-input v-model="customFormData.age" placeholder="请输入年龄"></fu-input>
					</fu-form-item>
					<fu-form-item label="兴趣爱好" required name="hobby">
						<fu-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys"></fu-checkbox>
					</fu-form-item>
				</fu-form>
				
				<fu-button height="44" color="#2979ff" @click="submit('customForm')">提交</fu-button>
			</view>
		</fu-section>
		
		<fu-section title="动态表单" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-form ref="dynamicForm" :modelValue="dynamicFormData" :rules="dynamicRules" labelWidth="80px">
					<fu-form-item label="邮箱" required name="email">
						<fu-input v-model="dynamicFormData.email" placeholder="请输入邮箱"></fu-input>
					</fu-form-item>
					<fu-form-item v-for="(item,index) in dynamicLists" :key="item.id" :label="item.label + ' ' + index" required :rules="item.rules" :name="'domains[' + item.id + ']'">
						<view class="fu-flex fu-flex-column-center fu-gap-30">
							<fu-input v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" />
							<fu-button size="normal" @click="del(item.id)">删除</fu-button>
						</view>
					</fu-form-item>
				</fu-form>
				
				<view class="fu-m-b-30 fu-flex">
					<fu-button height="25" color="#2979ff" margin="10rpx 0" @click="add" text="新增域名">
						<template v-slot:suffix>
							<fu-icons class="fu-m-l-10" name="plus-circle" color="#FFFFFF"></fu-icons>
						</template>
					</fu-button>
				</view>
				
				<fu-button height="44" color="#2979ff" @click="submit('dynamicForm')">提交</fu-button>
			</view>
		</fu-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduce: ''
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}, {
							validateFunction: (rule, value, data, callback) => {
								// 异步需要返回 Promise 对象
								return new Promise((resolve, reject) => {
									setTimeout(() => {
										if (value > 10) {
											// 通过返回 resolve
											resolve()
										} else {
											// 不通过返回 reject(new Error('错误信息'))
											reject(new Error('年龄必须大于十岁'))
										}
									}, 0)
								})
							}
						}]
					}
				},
				
				// 自定义表单数据
				customFormData: {
					name: '',
					age: '',
					hobby: []
				},
				// 自定义表单校验规则
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					},
					hobby: {
						rules: [{
								format: 'array'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 2) {
										callback('请至少勾选两个兴趣爱好')
									}
									return true
								}
							}
						]
					}
				},
				// 多选数据源
				hobbys: [{
					text: '跑步',
					value: 0
				}, {
					text: '游泳',
					value: 1
				}, {
					text: '绘画',
					value: 2
				}, {
					text: '足球',
					value: 3
				}, {
					text: '篮球',
					value: 4
				}, {
					text: '其他',
					value: 5
				}],
				dynamicFormData: {
					email: '',
					domains: {}
				},
				dynamicLists: [],
				dynamicRules: {
					email: {
						rules: [{
							required: true,
							errorMessage: '邮箱不能为空'
						}, {
							format: 'email',
							errorMessage: '邮箱格式错误'
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			// this.$refs.valiForm.setRules(this.rules)
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			
			add() {
				this.dynamicLists.push({
					label: '域名',
					rules: [{
						'required': true,
						errorMessage: '域名项必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>